<template>
    <el-form
        ref="ruleRef"
        :model="state.ruleForm"
        :rules="state.rules"
        label-position="top"
    >
        <el-form-item label="车辆" prop="carSid" for="_">
            <SelectLoadMore
                v-model:selectValue="state.ruleForm.carSid"
                v-model:options="state.carOptions"
                value="sid"
                label="carNumber"
                popperClass="car"
                placeholder="请选择车辆"
                :apiFun="getCarOptions"
            />
        </el-form-item>
        <el-form-item label="司机" prop="driversSid" for="_">
            <SelectLoadMore
                v-model:selectValue="state.ruleForm.driversSid"
                v-model:options="state.driverOptions"
                value="sid"
                label="nickName"
                multiple
                popperClass="driver"
                placeholder="请选择司机"
                :apiFun="getDriverOptions"
            />
        </el-form-item>
        <el-form-item>
            <el-button
                type="primary"
                :loading="form_loading"
                class="w-100% mt-10 mb--10"
                @click="submitForm(ruleRef)"
            >
                确认
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive, ref, inject } from "vue";
import SelectLoadMore from "@/components/selectLoadMore.vue";
import {
    getWaybillCars,
    getWaybillDrivers,
    assignDriverDeparture,
} from "@/apis/order/waybill";

const emit = defineEmits(["success"]);

const $message = inject("$message");

const form_loading = ref(false);
const ruleRef = ref(null);
const state = reactive({
    ruleForm: {
        carSid: null,
        driversSid: [],
    },
    rules: {
        carSid: [{ required: true, message: "请选择车辆", trigger: "blur" }],
        driversSid: [
            { required: true, message: "请选择司机", trigger: "blur" },
        ],
    },
    carOptions: [],
    driverOptions: [],
});

const getCarOptions = async (params) => {
    const res = await getWaybillCars({
        ...params,
        carNumber: params.keyword,
    });
    if (res.data.code == 200) {
        return res;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const getDriverOptions = async (params) => {
    const res = await getWaybillDrivers({
        ...params,
        nickName: params.keyword,
    });
    if (res.data.code == 200) {
        return res;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

// 分配司机发车
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            form_loading.value = true;
            let res = await assignDriverDeparture(state.ruleForm);
            form_loading.value = false;
            if (res.data.code == 200) {
                $message({
                    message: "操作成功",
                    type: "success",
                });
                emit("success");
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        }
    });
};
</script>
